/*
 * @description: 首页组件---我的任务
 * @fileName: myTask.scss
 * @author:  shangchangjun
 * @date:  2025/01/10 10:00:46
 * @version: V1.0.0 
*/
.task-container {
    position: relative;
    background: linear-gradient(185deg, #EE6B4A 0%, #E5423A 100%);
    padding: 15rpx 20rpx;

    // 第二层盒子
    &-box {
        background: linear-gradient(137deg, #FFFFFF 0%, #FCF5E3 100%);
    }

    // 我的任务标题
    .task-header {
        box-sizing: border-box;
        text-align: center;
        background: url($img_url_2025 + 'img/title/renwu_title.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        width: 450rpx;
        height: 108rpx;
		padding-top: 14rpx;
        .task-header-text{
            @include font_set_fold(#FFF5EC, 20, 28);
            background: linear-gradient(to bottom, #FFF5EC, #FFCD94); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
            -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
            -webkit-text-fill-color: transparent;/*给文字设置成透明*/
        }
    }

    // 任务列表
    .task-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 30rpx 16rpx;

        .task-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32rpx 0;
            border-bottom: 1rpx solid #E6DDCE;

            &:last-child {
                border: none;
            }

            &:first-child {
                padding-top: 0;
            }
        }

        .task-item-left {
            display: flex;
            align-items: center;

            .task-icon {
                flex-shrink: 0;
                margin-right: 20rpx;
                width: 80rpx;
                height: 80rpx;
				border-radius: 100%;
            }

            .task-info {
                flex-grow: 1;

                .task-title {
                    font-size: 16px;
                    font-weight: bold;
                    @include font_set(#6E3516, 14, 20);
                }

                .task-points {
                    display: flex;
                    align-items: center;
                    margin-top: 4rpx;
                    color: #d9534f;
                    @include font_set(#DF3430, 12, 20);

                    .icon_fen {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 6rpx;
                    }
                }
            }

        }


        .task-status {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 108rpx;
            height: 48rpx;
            background: linear-gradient(90deg, #EB475D 0%, #E74F26 100%);
            border-radius: 24rpx;
            @include font_set(#FFEBD2, 10, 48);

            &.completed {
                background: linear-gradient(90deg, rgba(235, 71, 93, .4) 0%, rgba(231, 79, 38, .4) 100%);
            }
        }
		

    }
	.task-nodata{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0 120rpx 0;
		.task-nodata-img{
			width: 89px;
			height: 89px;
		}
		.task-nodata-text{
			 @include font_set(#905421, 14, 19);
		}
	}
}